<template>
  <div>
    <transition name="el-zoom-in-center">
      <div v-show="item.isShow">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <el-button class="button" type="text" icon="el-icon-back" @click="backOne(false)"></el-button>
              <span>{{item.title}}</span>
              <el-button class="button" type="text" icon="el-icon-right" @click="backOne(true)"></el-button>
            </div>
          </template>
          <div class="card-body">
            <div class="pics">
              <el-image :src="item.pics" fit="cover" class="img"></el-image>
            </div>
            <el-divider class="divide" direction="vertical"></el-divider>
            <div class="text">{{item.content}}</div>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "HistoryCard",
  props:['item','changeActive'],
  methods:{
    backOne(val){
      this.changeActive(val)
    }
  },
  data(){
    return{

    }
  },
}
</script>

<style scoped>
.text{
  width: 400px;
  height: 400px;

}
.card-body{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.divide{
  height: 400px;
}
.pics{

  width: fit-content;
  height: fit-content;

}
.img{
  width: 400px;height: 320px;
  padding: 10px 10px 5px 10px;
  position: relative;
  bottom: 10px;
}
::v-deep(.el-card__header){
  padding: 5px 20px;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header span{
  font-size: 18px;
}
.card-header .button{
  font-size: 30px;
  font-weight: bolder;
}
.box-card{
  width: 1000px;
  height: 500px;
  position: relative;
  bottom: 20px;
}
</style>